import { ReactComponent as CheckMark } from '@/assets/images/auth/Check.svg';
import { SelectProps } from '@/shared/interfaces';
import { useMetaTag } from '@/shared/lib/hooks';
import { Button } from '@/shared/ui';

import cs from './SortModal.module.scss';

export const SortModal = ({
  sorts,
  sort,
  handleSelect,
}: {
  sorts: SelectProps[];
  sort: SelectProps;
  handleSelect: (args: SelectProps) => void;
}) => {
  useMetaTag(true, '#999999');
  return (
    <div className={cs.sort_container}>
      <h2 className={cs.title}>Сортировка</h2>
      <div className={cs.values}>
        {sorts.map((item) => (
          <Button
            className={cs.item}
            data-testid="button-select_sort"
            key={item?.id}
            onClick={() => handleSelect(item)}
          >
            <div>{item?.title}</div>
            <div className={cs.check}>{sort.id === item.id && <CheckMark />}</div>
          </Button>
        ))}
      </div>
    </div>
  );
};
